<template>
    <div>
        <!-- setup模式 {{ props.names }} -- {{ props.type }} -->
        {{ names }} -- {{ type }}

        <button @click="typeChange()">
            改变性别
        </button>
    </div>
</template>
<script setup>

let props = defineProps(['names','type'])
// 定义子组件向父组件响应事件的方法
let emit = defineEmits(['typeAnge'])
function typeChange(){
    // 子组件中定义的 props的值 不再可以被改变
    // props.type = '女';
    emit('typeAnge','女')
}

// 在 scrtpt标签的setup里面 可以说是一个语法糖
    // import {onMounted} from 'vue';

    // const name =  '666';

    // onMounted(() => {
    //     console.log(name);
    // })

    // console.log(name);
// ref 
// import {ref} from 'vue'
// // reactive
// // 告知 v3当前数据 是双向绑定的数据
// var names = ref([0,1,2,3])
// let arr = [0,1,2,3]
// console.log(names.value);
// console.log(arr);
// const props =  defineProps(['type','names'])
// defineProps  是接收父组件传值  必须是 setup模式 才能够 使用

// const props =  defineProps({
//     type: String,
//     names: String
// })
// Object.defineProperty  v2的双向绑定核心
// Proxy  v3的双向绑定核心
// export default {
//     // props :{
//     //     type: String,
//     //     names: String
//     // },
//     setup(){
//         // 在生命周期创建前 的前面 做的一些处理
//         console.log(this.names);
//     },
//     data(){
//         // 都是双向绑定的
//         return {
//             arr : [0,1,2,3],
//             names : [0,1,2,3]
//         }
//     },
//     created(){
//         console.log(this.arr);
//     }
// }

/* 
    setup
        可以说是 beforeCreate 实例创建前  created 实例创建后的总和
        在setup模式中,
        把生命周期beforeCreate和created统一组合成了setup 
        可以说是另类的舍弃,
        在vue 4版本:   创建前后会被完全舍弃,取而代之的是setup


        在vue3 中生命周期 销毁前(beforeDestory) 和 销毁后 (Destoryed) 被替换成了
            beforeUnmount 和 unmounted
*/
</script>